import "virtual:uno.css"
import "./index.css"
import React from "react"
import ReactDOM from "react-dom/client"
import {BrowserRouter, Route, Routes} from "react-router-dom"
import Layout from "./layout"
import Login from "./pages/login"
import rootReducer from "./store"
import {createStore} from "redux"
import {Provider} from "react-redux"

const store = createStore(rootReducer)

const App = () => {
    return (
        <>
            {/* React.StrictMode 是 React 的严格模式 */}
            <React.StrictMode>
                {/* Provider 是 React Redux 的组件, 这里用来提供 store */}
                <Provider store={store}>
                    {/* BrowserRouter 是 React Router 的路由组件 */}
                    {/* 如果要用 HashRouter，就把 BrowserRouter 换成 HashRouter */}
                    <BrowserRouter>
                        <Routes>
                            {/* 这里的 Route 是路由规则，path 是路由路径，Component 是路由组件 */}
                            <Route path="/login" Component={Login}/>
                            <Route path="*" Component={Layout}/>
                        </Routes>
                    </BrowserRouter>
                </Provider>
            </React.StrictMode>
        </>
    )
}

// 挂载到 id 为 root 的 DOM 上
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App/>)
